<template>
  <div class="home">
    <el-card class="welcome-card">
      <div slot="header">
        <h2>欢迎来到小学口算训练平台</h2>
      </div>
      <div class="content">
        <p>这是一个帮助小学生提高口算能力的练习平台。</p>
        <el-row class="feature-list">
          <el-col :span="8">
            <el-card shadow="hover">
              <i class="el-icon-edit feature-icon"></i>
              <h3>随机练习</h3>
              <p>系统会自动生成适合你水平的题目</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <i class="el-icon-timer feature-icon"></i>
              <h3>计时训练</h3>
              <p>培养快速准确的计算能力</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <i class="el-icon-s-data feature-icon"></i>
              <h3>进度跟踪</h3>
              <p>记录你的练习历史和进步</p>
            </el-card>
          </el-col>
        </el-row>
        <el-button
          type="primary"
          size="large"
          @click="$router.push('/practice')"
          class="start-button"
        >
          开始练习
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  margin-top: 20px;
}

.welcome-card >>> .el-card__header {
  text-align: center;
  background-color: #f5f7fa;
}

.welcome-card h2 {
  margin: 0;
  color: #303133;
}

.content {
  text-align: center;
  padding: 20px 0;
}

.feature-list {
  margin: 40px 0;
}

.feature-list .el-col {
  padding: 0 15px;
}

.feature-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 20px;
}

.feature-list h3 {
  margin: 10px 0;
  color: #303133;
}

.feature-list p {
  color: #606266;
  margin: 0;
}

.start-button {
  padding: 15px 30px;
  font-size: 16px;
}

.start-button i {
  margin-left: 5px;
}
</style>
